<template>
  <div id="app">
    <ul ref="ul">
  
    </ul>
    <button @click="fn">点击</button>
  </div>
</template>


<script>
import Vue from "vue"
//var ProfileCon = null;
// 构造器，用于动态创建组件，意思是比如点击某个按钮创建一个组件
var Profile = Vue.extend({
  template: `<div>
        <p class="zzh">{{firstName}}</p>
  </div>`,
  data: function () {
    return {
      firstName: "成功",
    };
  },
  methods:{
     
  }
});

export default {
    methods:{
        fn(){
            var ProfileCon =  new Profile().$mount()
            console.log(ProfileCon,2222)
            this.$refs.ul.appendChild(ProfileCon.$el)
            let that = this
            setTimeout(() => {
                ProfileCon.$el.remove();
            }, 3000);

        }
    }
};
</script>




<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.zzh {
    width: 50px;
    height: 20px;
    background: rgba(0, 0, 0,.5);
    color: #fff;
}
</style>
